<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="个人中心" color='#fff' :bg-color="{backgroundColor:'#f87162'}" :border-bottom="false"></fa-navbar>
		<!-- 会员中心 -->
		<view class="u-p-t-30 u-p-b-50 home" :style="[{ background:'linear-gradient(to bottom, #f87162, #fa9c87)' || theme.bgColor}]">
			<view class="userinfo">
				<block v-if="vuex_token">
					<u-avatar size="120"  
						:src="vuex_user.avatar" @click="goPage('/pages/my/profile', true)"></u-avatar>
					<view class="u-skeleton-fillet u-m-t-10 u-p-l-80 u-p-r-80 u-line-1"
						@click="goPage('/pages/my/profile', true)">{{ vuex_user.nickname || '' }}				 
					</view>
					
					<view class="u-skeleton-fillet u-m-t-10 u-p-l-80 u-p-r-80 u-line-1"
						>{{ vuex_user.id || '' }}				 
					</view>
					 
				</block>
				<block v-else>
					<u-avatar size="120" src="/static/image/avatar.png"></u-avatar>
					<view class="u-m-t-30"><u-button hover-class="none" size="mini"
							@click="goPage('/pages/login/mobilelogin')">立即登录</u-button></view>
				</block>
			</view>
		 
		</view>
		<!-- 统计 -->
		<view class="u-flex u-text-center u-p-l-30 u-p-r-30 u-p-t-50 u-p-b-50 bg-white">
			<view class="u-flex-4" @click="goPage('/pages/order/list?status=0', true)">
				<view class="u-text-weight u-font-28">
					<!-- <text v-text="(vuex_user.order && vuex_user.order.allnum) || 0"></text> -->
						<!-- <u-icon name="../../static/tabbar/category.png" :size="40" color="#19be6b"></u-icon> -->
							<image src="../../static/image/orderall.png" style="width: 30px;height:30px" mode="widthFix"></image>
						</view>
					
				<view class="u-m-t-20">全部订单</view>
			</view>
			 
			<view class="u-flex-4 u-border-left u-border-right" @click="goPage('/pages/order/list?status=1', true)">
				<view class="u-text-weight u-font-28">
					<!-- <text v-text="(vuex_user.order && vuex_user.order.created) || 0"></text> -->
					<!-- <u-icon name="account-fill" :size="40" color="#19be6b"></u-icon>	 -->
					
					<image src="../../static/image/orderdfk.png" style="width: 30px;height:30px" mode="widthFix"></image>
						</view>
				<view class="u-m-t-20">待付款</view>
			</view>
			<view class="u-flex-4 u-border-left u-border-right" @click="goPage('/pages/order/list?status=2', true)">
				<view class="u-text-weight u-font-28">
					<!-- <text						v-text="(vuex_user.order && vuex_user.order.paid) || 0"></text> -->
			    <!-- <u-icon name="account-fill" :size="40" color="#19be6b"></u-icon> -->
				
				<image src="../../static/image/orderfahuo.png" style="width: 30px;height:30px" mode="widthFix"></image>
				</view>
				<view class="u-m-t-20">待发货</view>
			</view>
			<view class="u-flex-4 u-border-left u-border-right" @click="goPage('/pages/order/list?status=3', true)">
				<view class="u-text-weight u-font-28">
					<!-- <text						v-text="(vuex_user.order && vuex_user.order.numshou) || 0"></text> -->
					<!-- <u-icon name="account-fill" :size="40" color="#19be6b"></u-icon> -->
					<image src="../../static/image/ordersh.png" style="width: 30px;height:30px" mode="widthFix"></image>
					</view>
				<view class="u-m-t-20">待收货</view>
			</view>
			<!-- <view class="u-flex-4 u-border-left u-border-right" @click="goPage('/pages/order/list?status=4', true)">
				<view class="u-text-weight u-font-28"><text
						v-text="(vuex_user.order && vuex_user.order.numdai) || 0"></text></view>
				<view class="u-m-t-20">待评价</view>
			</view> -->
			<view class="u-flex-4" @click="goPage('/pages/order/list?status=5', true)">
				<view class="u-text-weight u-font-28">
					<!-- <text					v-text="(vuex_user.order && vuex_user.order.numok) || 0"></text> -->
					<!-- <u-icon name="account-fill" :size="40" color="#19be6b"></u-icon> -->
					<image src="../../static/image/orderok1.png" style="width: 30px;height:30px" mode="widthFix"></image>
					</view>
				<view class="u-m-t-20">已完成</view>
			</view>
			<!-- 订单状态:0=正常,1=已取消,2=已失效,3=已完成,4=退货退款中 -->
			<!-- <view class="u-flex-4" @click="goPage('/pages/order/list?status=4', true)">
				<view class="u-text-weight u-font-28"><text
						v-text="(vuex_user.order && vuex_user.order.numshouhou) || 0"></text></view>
				<view class="u-m-t-20">售后</view>
			</view> -->
			
		</view>
		<!-- 导航 -->
		<view class="u-m-t-30 u-m-b-15">
			<!-- <u-grid :col="3">		
				
			</u-grid> -->
			<u-grid :col="3">
				<!-- <u-grid-item @click="goPage('/pages/index/index', true)">
					<u-icon name="list" :size="60" color="#ff9900"></u-icon>
					<view class="grid-text">商城首页</view>
				</u-grid-item> -->
				<!-- pages/webview/webview  /pages/uform/luckyto" -->
				<!-- <u-grid-item @click="goPage('pages/webview/webview',true)" >
					<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
					<view class="grid-text">抽奖</view>
				</u-grid-item> -->
				
				<u-grid-item @click="goPage('/pages/my/profile', true)">
										<u-icon name="account-fill" :size="60" color="#19be6b"></u-icon>
										<view class="grid-text">个人资料</view>
				</u-grid-item>
				<u-grid-item @click="goPage('/pages/uform/uformbx',true)">
					<u-icon name="list" :size="60" color="#ff9900"></u-icon>
					<view class="grid-text">免费上门救援</view>
				 </u-grid-item>
				 <u-grid-item @click="goPage('/pages/order/oduformbxlist',true)">
				 	<u-icon name="list" :size="60" color="#ff9900"></u-icon>
				 	<view class="grid-text">报修记录</view>
				  </u-grid-item>
				  
			
				 
				 <u-grid-item @click="goPage('/pages/uform/uformadd',true)">
				 	<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
				 	<view class="grid-text">客户表单</view>
				  </u-grid-item>
				  
				 
			 
				  <u-grid-item @click="goPage('/pages/my/fxsindex',true)">
				  	<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
				  	<view class="grid-text">分销商入口</view>
				   </u-grid-item>
				 
				 <!-- 放一个超管 ，2：检测是否门店店长-->
				<u-grid-item @click="goPage('/pages/my/storeindex',true)"  v-if="vuex_user.ishavamd==1 || vuex_user.isstoremgrsuper==1">
				 	<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
				 	<view class="grid-text">门店管理</view>
				</u-grid-item>
				
				
				<u-grid-item @click="goPage('/pages/order/cw_fybx',true)"  v-if="vuex_user.isstoremgrsuper==1">
				 	<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
				 	<view class="grid-text">费用支出</view>
				</u-grid-item>
				
				
				  
				  
			    <!-- <u-cell-item title="费用支出" @click="goPage('/pages/order/cw_fybx', true)"></u-cell-item> -->
				  					
			
						
						
				<u-grid-item  @click="goPage('/pages/my/collect', true)">
					<u-icon name="heart-fill" :size="60" color="#19be6b"></u-icon>
					<view class="grid-text">我的收藏</view>
				</u-grid-item>
			
					<u-grid-item @click="goPage('/pages/address/address', true)">
						<u-icon name="map-fill" :size="60" color="#19be6b"></u-icon>
						<view class="grid-text">收货地址</view>
					</u-grid-item>
				<u-grid-item @click="goPage('/pages/order/list', true)">
					<u-icon name="list" :size="60" color="#ff9900"></u-icon>
					<view class="grid-text">我的订单</view>
				</u-grid-item>
				<!-- <u-grid-item @click="toSignin">
					<u-icon name="pushpin-fill" :size="60" color="#2979ff"></u-icon>
					<view class="grid-text">每日一签</view>
				</u-grid-item> -->
		        <!-- /pages/coupon/coupon -->
			
				
				<u-grid-item @click="goPage('/pages/coupon/coupon',true)">
					<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
					<view class="grid-text">领取优惠券</view>
				</u-grid-item>
				
				<u-grid-item @click="goPage('/pages/coupon/user',true)">
					<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
					<view class="grid-text">我的优惠券</view>
				</u-grid-item>
		 
				<!-- <u-grid-item @click="goPage('/pages/coupon/user',true)">
					<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
					<view class="grid-text">我的优惠券</view>
				</u-grid-item> -->
		 
				
				  <u-grid-item @click="goPage('/pages/uform/verifiorder',true)" v-if="vuex_user.group_id==2">
				  	<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
				  	<view class="grid-text">核销卡券</view>
				  </u-grid-item>
				  
				  <u-grid-item @click="goPage('/pages/uform/couponsel',true)" v-if="vuex_user.group_id==2">
				  	<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
				  	<view class="grid-text">查询优惠券</view>
				  </u-grid-item>
				  <u-grid-item @click="goPage('/pages/uform/couponusellist',true)">
				  	<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
				  	<view class="grid-text">核销记录</view>
				  </u-grid-item>
				  
				  
				  		
		
				<!-- <u-grid-item @click="goPage('/pages/score/order',true)">
					<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
					<view class="grid-text">我的积分兑换</view>
				</u-grid-item> -->
				<!-- /pages/help/index -->
				 <!-- 单页详情   /pages/page/page?id=1&diyname=diyname -->
				<u-grid-item  @click="goPage('/pages/page/page?id=3')">
					<u-icon name="question-circle" :size="60" color="#2979ff"></u-icon>
					<view class="grid-text">质保明细</view>
				</u-grid-item>
				<!-- #ifdef MP-WEIXIN -->
				<u-grid-item>
					<button class="share-btn" open-type="contact">
						<u-icon name="server-man" :size="60" color="#2979ff"></u-icon>
						<view class="grid-text">联系客服</view>
					</button>
				</u-grid-item>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<u-grid-item @click="callphone">
					<u-icon name="server-man" :size="60" color="#2979ff"></u-icon>
					<view class="grid-text">联系客服</view>
				</u-grid-item>
				<!-- #endif -->
				
			</u-grid>
			<u-grid :col="3">
			<!-- 	<u-grid-item @click="goPage('/pages/my/profile', true)">
					<u-icon name="account-fill" :size="60" color="#19be6b"></u-icon>
					<view class="grid-text">个人资料</view>
				</u-grid-item> -->
			
			</u-grid>
			<u-grid :col="3">
				<!-- <u-grid-item @click="goPage('/pages/page/page?diyname=aboutus')">
					<u-icon name="info-circle-fill" :size="60" color="#2979ff"></u-icon>
					<view class="grid-text">关于我们</view>
				</u-grid-item> -->
			</u-grid>
			<!-- <u-cell-group>
				<u-cell-item icon="list" title="我的订单" @click="goPage('/pages/order/list', true)"></u-cell-item>
				<u-cell-item icon="pushpin-fill" title="每日一签" @click="toSignin"></u-cell-item>
				<u-cell-item icon="heart-fill" title="我的收藏" @click="goPage('/pages/my/collect', true)"></u-cell-item>
				<u-cell-item icon="map-fill" title="我的地址" @click="goPage('/pages/address/address', true)"></u-cell-item>
				<u-cell-item icon="coupon-fill" title="我的优惠券" @click="goPage('/pages/coupon/user',true)"></u-cell-item>
				<u-cell-item icon="integral-fill" title="我的积分兑换"
					@click="goPage('/pages/score/order',true)"></u-cell-item>
				<view class="u-border-bottom u-p-30">
					<!-- #ifdef MP-WEIXIN -->
					<button class="share-btn u-flex u-row-between" open-type="contact">
						<view class="fa-cell">
							<u-icon size="34" name="server-man"></u-icon>
							<text class="u-m-l-10">联系客服</text>
						</view>
						<view class="">
							<u-icon name="arrow-right" color="#969799"></u-icon>
						</view>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<button class="share-btn u-flex u-row-between" @click="callphone">
						<view class="fa-cell">
							<u-icon size="34" name="server-man"></u-icon>
							<text class="u-m-l-10">联系客服</text>
						</view>
						<view class="">
							<u-icon name="arrow-right" color="#969799"></u-icon>
						</view>
					</button>
					<!-- #endif -->
				</view>
				<u-cell-item icon="account-fill" title="个人资料" @click="goPage('/pages/my/profile', true)"></u-cell-item>
				<u-cell-item icon="question-circle" title="帮助中心" @click="goPage('/pages/help/index')"></u-cell-item>
				<u-cell-item icon="info-circle-fill" title="关于我们"
					@click="goPage('/pages/page/page?diyname=aboutus')"></u-cell-item>
				<!-- <u-cell-item icon="backspace" v-if="vuex_token" title="退出登录" @click="goPage('out')"></u-cell-item> -->
			</u-cell-group>  
			<!-- <view  style="padding: 40rpx 10%;" v-if="vuex_token" >
				<u-button shape="square" type="warning" @click="goPage('out')">退出登录</u-button>
			</view> -->
		</view>
		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import {
		avatar
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [avatar],
		computed: {
			wavetop() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-top.png';
			},
			wavemiddle() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-mid.png';
			},
			wavebottom() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-bot.png';
			},
			isBind() {
				return false;
			}
		},
		onShow() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				this.$u.vuex('vuex_user', {});
			}
			//移除事件监听
			uni.$off('uAvatarCropper', this.upload);
		},
		data() {
			return {
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				url: '',
				form: {
					avatar: ''
				}
			};
		},
		methods: {
			getUserIndex: async function() {
				let res = await this.$api.getUserIndex();
				uni.stopPullDownRefresh();
				if (res.code == 1) {
					this.$u.vuex('vuex_user', res.data.userInfo || {});
					if (res.data.showProfilePrompt && !this.vuex_setting.prompted) {
						// 弹窗每次登录状态只提示一次
						this.$u.vuex('vuex_setting.prompted', true);
						uni.showModal({
							title: '温馨提示',
							confirmText: '去设置',
							cancelText: '取消',
							showCancel: true,
							content: '当前未设置昵称，请设置昵称后再继续操作',
							success: (res) => {

								if (res.confirm) {
									this.$u.route("/pages/my/profile");
								} else if (res.cancel) {

								}
							}
						});
					}
				} else {
					this.$u.toast(res.msg);
					return;
				}
			},
			toSignin() {
				if (!this.vuex_user.is_install_signin) {
					this.$refs.uTips.show({
						title: '请先安装会员签到插件插件或启用该插件',
						type: 'error',
						duration: '3000'
					});

					return;
				}
				this.goPage('/pages/signin/signin', true);
			},
			editAvatar: async function() {
				let res = await this.$api.goUserAvatar({
					avatar: this.form.avatar
				});
			},
			// #ifndef MP-WEIXIN
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.vuex_config.phone //仅为示例
				});
			}
			// #endif
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				uni.stopPullDownRefresh();
				this.$u.toast('请先登录');
				this.$u.vuex('vuex_user', {});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f6f8;
	}

	.fa-cell {
		color: #606266;
	}

	.grid-text {
		padding-top: 14rpx;
		color: #333;
	}

	.home {
		position: relative;

		.userinfo {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx 0;
			z-index: 100;
			height: 310rpx;

			.u-skeleton-fillet {
				color: #ffffff;
				z-index: 101;
			}
		}

		.corrugated {
			bottom: -2rpx;
			left: 0;
			position: absolute;
			width: 100%;
			height: 50%;
			overflow: hidden;
			z-index: 0;

			.wave-item {
				position: absolute;
				width: 200%;
				left: 0;
				height: 200rpx;
				background-repeat: repeat no-repeat;
				background-position: 0 bottom;
				transform-origin: center bottom;
			}

			.wave-top {
				opacity: 0.5;
				animation: wave-animation 3s;
				animation-delay: 1s;
				background-size: 50% 60rpx;
				z-index: 15;
			}

			.wave-middle {
				opacity: 0.75;
				animation: wavemove 10s linear infinite;
				background-size: 50% 80rpx;
				z-index: 10;
			}

			.wave-bottom {
				animation: wavemove 15s linear infinite;
				background-size: 50% 45rpx;
				z-index: 5;
			}
		}
	}

	@keyframes wavemove {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1);
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(0.55);
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1);
		}
	}
</style>